<template>
  <modal ref="modal_1"
         :title="title"
         :isCloseConfirm="false"
         top="5%"
         width="50%"
         height="50%"
         :close-on-click-modal="false"
         @modalOpened="opened"
         @modalClose="close">
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model:search="search"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @sort-change="sortChange"
               @row-dblclick="dblclick"
               @selection-change="selectionChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    </avue-crud>
      <template #footerButton>
        <!--<el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>-->
        <!--<el-button type="primary" icon="el-icon-circle-check"  @click="clearSelection">清空-->
        <!--</el-button>-->
        <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">关闭</el-button>
      </template>
  </modal>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/anwise/customer/customer";
  import {mapGetters} from "vuex";

  export default {

    data() {
      return {
          emits: ["success"],
          title:"选择客户信息",
        form: {},
        query: {},
        loading: true,
          dateFormat: 'YYYY-MM-DD',
          pickerOptions: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
          search:{},
        selectionList: [],
          arrayList:[],
        option: {
            // height:'auto',
            // calcHeight: 30,
            tip: false,
            searchShow: false,
            searchMenuSpan: 6,
            searchSpan:8,
            border: true,
            index: true,
            selection: false,
            labelWidth: 150,
            menuWidth: 120,
            menu:false,
            indexWidth:100,
            addBtn: false,
            editBtn: false,
            viewBtn: false,
            delBtn: false,
            stripe: true,
            searchIndex: 3,
            searchIcon: false,
            searchEnter:true,
          column: [
              {
                  label: "客户编号",
                  prop: "custNo",
                  type: "number",
                  search: true,
                  fixed: true,
                  controls:false,
                  align: "center",
                  overHidden: true,
                  sortable: true,
                  width: 120,
              },
              {
                  label: "客户名称",
                  prop: "custName",
                  type: "input",
                  search: true,
                  fixed: true,
                  overHidden: true,
                  sortable: true,
                  width: 150,
                  rules: [{
                      required: true,
                      message: "请输入客户名称",
                      trigger: "blur"
                  }],
              },
              {
                  label: "英文名称",
                  width: 200,
                  prop: "custNameEn",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,

              },
              {
                  label: "组织机构",
                  width: 200,
                  prop: "deptName",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
              },
              // {
              //     label: "组织机构",
              //     prop: "deptId",
              //     type: "select",
              //     search: true,
              //     sortable: true,
              //     overHidden: true,
              //     width: 120,
              //     filterable: true,
              //     virtualize:true,
              //     dicUrl: '/api/blade-anwise/common/deptList?deptCategory=1&bodyType=4',
              //     props: {
              //         label: 'deptName',
              //         value: 'id',
              //     },
              //     dataType: 'string',
              //     rules: [{
              //         required: true,
              //         message: "请输入组织机构",
              //         trigger: "blur"
              //     }],
              // },
              {
                  label: "客户类别",
                  prop: "custType",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=customer_type",
                  filterable: true,
                  overHidden: true,
                  sortable: true,
                  width: 120,
                  props: {
                      label: 'dictValue',
                      value: 'dictKey',
                  },
                  dataType: 'string',
                  rules: [{
                      required: true,
                      message: "请输入客户类别",
                      trigger: "blur"
                  }],
                  search: true,
              },
              {
                  label: "停止交易",
                  prop: "stopTrading",
                  type: "select",
                  filterable: true,
                  overHidden: true,
                  sortable: true,
                  width: 120,
                  dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                  props: {
                      label: 'dictValue',
                      value: 'dictKey',
                  },
                  dataType: 'string',
                  search: true,
              },
              {
                  label: "运输条约",
                  prop: "tansportTreaty",
                  type: "select",
                  filterable: true,
                  overHidden: true,
                  sortable: true,
                  width: 120,
                  dicUrl: "/blade-system/dict-biz/dictionary?code=tansport_treaty",
                  props: {
                      label: 'dictValue',
                      value: 'dictKey',
                  },
                  dataType: 'string',
                  search: true,
              },
              {
                  label: "客户地址",
                  prop: "custAddr",
                  type: "input",
                  span: 24,
                  overHidden: true,
                  width: 180,
                  sortable: true,
                  rules: [{
                      required: true,
                      message: "请输入客户地址",
                      trigger: "blur"
                  }],
              },
              {
                  label: "信用额度",
                  prop: "creditLimit",
                  overHidden: true,
                  sortable: true,
                  search: true,
                  searchSlot: true,
                  type: "input",
                  width: 120,
              },
              {
                  label: "付款条件",
                  prop: "paymentTerms",
                  type: "select",
                  filterable:true,
                  overHidden: true,
                  sortable: true,
                  search:true,
                  width: 120,
                  dicUrl: '/api/blade-system/dict-biz/dictionary?code=pay_condition',
                  props: {
                      label: 'dictValue',
                      value: 'dictKey',
                  },
                  dataType: 'string',
              },
              {
                  label: "内部提醒",
                  prop: "internalReminder",
                  type: "textarea",
                  overHidden: true,
                  sortable: true,
                  span: 24,
                  hide: true,
              },
              {
                  label: "箱唛备注",
                  prop: "cartonMarkRemark",
                  type: "textarea",
                  overHidden: true,
                  span: 24,
                  hide: true,
              },
              {
                  label: "销售备注",
                  prop: "salesRemark",
                  type: "textarea",
                  span: 24,
                  hide: true,
              },
              {
                  label: "生产备注",
                  prop: "prodRemark",
                  type: "textarea",
                  overHidden: true,
                  span: 24,
                  hide: true,
              },
              {
                  label: "联系人1",
                  prop: "contact1",
                  overHidden: true,
                  sortable: true,
                  type: "input",
                  width: 120,
              },
              {
                  label: "联系人1部门",
                  prop: "contactDept1",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人1电话",
                  prop: "contactPhone1",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width: 150,
              },
              {
                  label: "联系人1邮箱",
                  prop: "contactMail1",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width: 150,
              },
              {
                  label: "联系人2",
                  prop: "contact2",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人2部门",
                  prop: "contactDept2",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人2电话",
                  prop: "contactPhone2",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人2邮箱",
                  prop: "contactMail2",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人3",
                  prop: "contact3",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人3部门",
                  prop: "contactDept3",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人3电话",
                  prop: "contactPhone3",
                  type: "input",
                  hide: true,
              },
              {
                  label: "联系人3邮箱",
                  prop: "contactMail3",
                  type: "input",
                  hide: true,
              },
              {
                  label: "创建人员",
                  prop: "createUserName",
                  type: "input",
                  overHidden: true,
                  width: 120,
              },
              {
                  label: "创建时间",
                  prop: "createTime",
                  type: "input",
                  width: 160,
                  sortable: true,
                  overHidden: true,
              },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.bank_info_add, false),
          viewBtn: this.validData(this.permission.bank_info_view, false),
          delBtn: this.validData(this.permission.bank_info_delete, false),
          editBtn: this.validData(this.permission.bank_info_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
        selectionLoad() {
            let arr = [];
            // console.log(this.selectionList);
            // if (this.selectionList && this.selectionList != null
            //     && this.selectionList.length > 0) {
            //     this.data.forEach(row => {
            //         if(this.selectionList.some((val) => val.id=== row.id)) {
            //             console.log("row.id1+"+row.id)
            //             arr.push(row);
            //         }
            //     })
            // } else {
              console.log(this.data,this.arrayList);
                if (this.arrayList) {
                    this.data.forEach(row => {
                        if(this.arrayList.some((val) => val.id=== row.id)) {
                            console.log("row.id2+"+row.id)
                            arr.push(row);
                        }
                    })

                }
            // }
            this.$nextTick(() => {
                arr.forEach(item => {
                    // this.$refs.crud.clearSelection();
                    console.log("check"+item.id)
                    this.$refs.crud.toggleRowSelection(item, true);
                })
            })
        },
        showSelect() {
          this.$refs.modal_1.show();
          // this.onLoad(this.page);
        },
        clearData() {
            this.data = [];
            this.page.currentPage = 1;
        },
        clearSelection() {
            this.selectionList = [];
            this.arrayList = [];
            this.$refs.crud.toggleSelection();
        },
        /** 双击选中*/
        dblclick(row) {
            console.log(row);
            this.$emit("success",row);
            this.$refs.modal_1.hide()
        },
        /**
         * 提交成功之后
         */
        submitAfter() {
            this.$refs.modal_1.hide()
        },
        handleSubmit() {
            console.log("setBankList")
            console.log(this.selectionList)
            this.$refs.modal_1.hide();
            this.$emit("setBankList",this.selectionList);

            // if (this.isAdd) {
            //   this.$refs.modal_1.handleClose()
            //   // this.$emit("success", this.selectionList);
            // } else if (this.isListAdd) {
            //
            //   // this.$emit("success", this.versionId, this.selectionList);
            // }
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1
            this.onLoad(this.page, params);
            done();
        },
        sortChange(val) {
            console.log(val)
            this.sort = {
                prop: val.prop,
                order: val.order
            };
            let order = "";
            if (this.sort.prop && this.sort.order) {
                if (this.sort.order === "descending") {
                    order = `${this.sort.prop} desc`
                } else {
                    order = `${this.sort.prop} asc`
                }
            }
            this.query.orderBy = order;
            this.onLoad(this.page);
        },





        opened() {
          //  this.onLoad(this.page);
        },
        close() {
            this.clearData();
            this.clearSelection();
        },


      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
      onLoad(page, params = {}) {
        this.loading = true;
        params.stopTrading = "否";
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionLoad();
          // this.selectionClear();
        });
      },
        handleDatePickerChange(value) {
            console.log(this.search);
        },
    }
  };
</script>

<style>
  ::v-deep .el-table__row {
    height: 30px !important;
  }
  ::v-deep  .el-table__cell{
    padding:  5px !important;
  }

</style>
